<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>map</title>
	<style>
  * {
    padding: 0;
    margin: 0;
  }
  body {
    padding: 20px;
    width: 100vw;
    display: flex;
    box-sizing: border-box;
  }
  div {
    border: solid 2px #ddd;
    padding: 10px;
    flex: 1;
  }
  div:last-of-type {
    margin-left: -2px;
  }
  ul {
    list-style: none;
    display: flex;
    width: 200px;
    flex-direction: column;
  }
  li {
    height: 30px;
    border: solid 2px #e67e22;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    color: #333;
    transition: 1s;
  }
  a {
    border-radius: 3px;
    width: 20px;
    height: 20px;
    text-decoration: none;
    text-align: center;
    background: #16a085;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
  }
  .remove {
    border: solid 2px #eee;
    opacity: 0.8;
    color: #eee;
  }
  .remove a {
    background: #eee;
  }
  p {
    margin-top: 20px;
  }
  p span {
    display: inline-block;
    background: #16a085;
    padding: 5px;
    color: white;
    margin-right: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
  }
</style>

</head>
<body>
  <div>
    <ul>
      <li id="li1"><span>php</span> <a href="javascript:;">+</a></li>
      <li id="li2"><span>js</span> <a href="javascript:;">+</a></li>
      <li id="li3"><span>向军讲编程</span><a href="javascript:;">+</a></li>
    </ul>
  </div>
  <div>
    <strong id="count">共选了xx门课</strong>
    <p id="lists"></p>
  </div>
</body>

<script>

  class Lesson {
  	constructor() {
  	  this.lis = document.querySelectorAll("ul>li");
      this.countELem = document.getElementById("count");
      this.listElem = document.getElementById("lists");
      this.map = new WeakMap();
  	}
  	run() {
  		var self = this
  		this.lis.forEach(item => {
  			item.querySelector('a').addEventListener('click', event=> {
  				const elem = event.target
  				
  				if(self.map.has(item)) {
  					elem.style.background = 'green';
  					elem.innerHTML = '+'
  					self.map.delete(item)
  				} else {
  					elem.style.background = 'red';
  					elem.innerHTML = '-'
  					self.map.set(item, true)
  				}

  				this.render()
  			})
  		})
  	}
  	count(){
  		return [...this.lis].filter(li => {
  			return this.map.has(li)
  		}).length
  	}
  	lists(){
  		var ret = [...this.lis].filter(li => {
  			return this.map.has(li)
  		}).map(li => {
  			return `<span>${li.querySelector('span').innerText}</span>`
  		})

  		console.log(ret)

  		return ret
  	}
  	render() {
  		this.countELem.innerHTML =  `共选了${this.count()}门课`
  		this.listElem.innerHTML =  this.lists().join('')
  	}
  }
  new Lesson().run();

</script>
</html>